<template>
	<view class="banner-container">
		<swiper :style="{width: '100vw', height: '410rpx'}" :indicator-dots="false" :duration="swiperConfig.duration"
			:current="curIndex" :previous-margin="swiperConfig.previousMargin" :next-margin="swiperConfig.nextMargin"
			@change="swiperChange" @animationfinish="animationfinish">
			<swiper-item v-for="(item, i) in bannerList" :key="i" :render-whole="true">
				<view class="image-container"
					:class="[curIndex===0?((i===listLen-1)?'item-left':(i===1?'item-right':'item-center')):(curIndex===listLen-1?(i===0?'item-right':(i===listLen-2?'item-left':'item-center')):(i===curIndex-1?'item-left':(i===curIndex+1?'item-right':'item-center')))]">
					<view class="slide-image" :style="{
              transform: curIndex===i? 'scale(1,1)':'scale(1,0.7)' ,
              transitionDuration: '.3s',
              transitionTimingFunction: 'ease',
			  background:`url(${(curIndex==0&&item.picture)||((curIndex==1&&(((useridentity==5 || resData.userIdentityStatus==2))&&item.picture)||((curIndex==1 && useridentity==2 )&&item.picture)||((curIndex==1 && ( [1,4].includes(useridentity) ) )&&item.picture) || ((curIndex==1 && useridentity!=2)&&'https://images.linglinggong.net/static/icon3/grow/none1.png') || ((curIndex==2 && ( [2,3,5].includes(useridentity)) )&&item.picture) || ((curIndex==2 && useridentity!=3 ) &&'https://images.linglinggong.net/static/icon3/grow/none2.png') ))}) no-repeat`,
			}" @click="getBannerDetail(i)">
						<view class="text"
							v-if="((curIndex==0&&item.picture&&i==0)||((curIndex==1&&i==1&&(((useridentity==5 || resData.userIdentityStatus==2))&&item.picture)||((curIndex==1&&i==1 && useridentity==2 )&&item.picture)||((curIndex==1&&i==1 &&  [1,4].includes(useridentity)  )&&item.picture)  || ((curIndex==1&&i==1 && useridentity!=2 )&&false) || ((curIndex==2&&i==2 && ( [2,3,5].includes(useridentity)) )&&item.picture) || ((curIndex==2&&i==2 && useridentity!=3 )&&false) )))">
							<view class="text-left">
								<text v-if="curIndex==0" :class="[curIndex==2?'text1':'text3','text4']">
									{{useridentity==0?'当前身份':'过往身份'}} </text>
								<text v-if="curIndex==1" :class="[curIndex==2?'text1':'text3','text4']">
									{{((useridentity==4&&curIndex==1)&&'待激活')||((useridentity==1&&curIndex==1)&&'当前身份')||'过往身份'}}
								</text>
								<text v-if="curIndex==2" :class="[curIndex==2?'text1':'text3','text4']">
									{{((useridentity==5&&curIndex==2)&&'待激活')||(( [2,3].includes(useridentity) &&curIndex==2)&&'当前身份') ||' '}}
								</text>
								<view>
									<view>
										<view>
											<text
												:class="[curIndex==2?'text1':'text3']">{{(curIndex==0&&((listStatus.filter((item)=>item.isOk==true).length)*34>100?100:(listStatus.filter((item)=>item.isOk==true).length)*34)||0)||(curIndex==1&&((listStatus.filter((item)=>item.isOk==true).length)*34>100?100:(listStatus.filter((item)=>item.isOk==true).length)*34)||0)||(curIndex==2&&content.userIdentity !== 3&&((listStatus.filter((item)=>item.isOk==true).length)*25||0))||(content.userIdentity == 3&&((listStatus.filter((item)=>item.isOk==true).length)*50||0))||0}}/100
											</text>
											<text :class="[curIndex==2?'text1':'text3']">
												进度{{listStatus.every((item)=>item.isOk==true)?'已':'未'}}完成</text>
										</view>
										<view :style="{'margin-right':curIndex==2?'55rpx':'' }">
											<text
												:class="[curIndex==2?'text1':'text3']">{{(curIndex==0&&'试用零工')||(curIndex==1&&'正式零工')||(curIndex==2&&'金牌零工')}}</text>
											<text v-show="curIndex==2 && content.userIdentityStatus==2 &&dataTime"
												style="text-align: center;">
												{{`${((resData.userIdentity==2&& resData.userIdentityStatus==2) && '晋升')||(resData.userIdentity ==3 && resData.userIdentityStatus == 2&&'保留')}期剩 ${dataTime} 天`}}
												<image src="https://images.linglinggong.net/static/icon3/grow/why.png" mode="" class="iconWhy"
													v-if="content.userIdentity==2&&curIndex==2" @click="showTip">
												</image>
												<view class="iconWhy2" v-if="isShow">
													<text> 晋升中将享受</text>
													<text>同等金牌权益</text>
												</view>
											</text>
										</view>
									</view>
									<!-- 进度条 -->
									<view
										:class="[(curIndex==0&&'progress1')||(curIndex==1&&'progress2')||(curIndex==2&&'progress3') ]">
										<view class="progressActive"
											:style="{width: ((curIndex==0&&`${ 186*(listStatus.filter((item)=>item.isOk==true).length) }rpx`) ||(curIndex==1&& `${ 186*(listStatus.filter((item)=>item.isOk==true).length) }rpx`)||(curIndex==2&&content.userIdentity !== 3 && `${140.25* (listStatus.filter((item)=>item.isOk==true).length)}rpx`) ||(curIndex==2&&content.userIdentity == 3 && `${280.5* (listStatus.filter((item)=>item.isOk==true).length)}rpx`)||0)}">
										</view>
										<view class="progressActiveLine">
										</view>
									</view>
								</view>
								<view>
									<text
										:class="[curIndex==2?'text1':'text3']">{{(curIndex==0&&'4')||(curIndex==1&&'5')||(curIndex==2&&'10')}}项</text>
									<text :class="[curIndex==2?'text1':'text3']">权益 </text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		props: {
			listStatus: {
				type: Array,
				default () {
					return []
				}
			},
			dataTime: {
				type: Number,
				default: 0
			},
			type: {
				type: Number,
				default: 0
			},
			useridentity: {
				type: Number,
				default: 0
			},
			content: {
				type: Object,
				default () {
					return {}
				}
			},
			resData: {
				type: Object,
				default () {
					return {}
				}
			},
			bannerList: {
				type: Array,
				default () {
					return []
				}
			},
			swiperConfig: {
				type: Object,
				default () {
					return {
						duration: 1000,
						circular: true,
						previousMargin: '32rpx',
						nextMargin: '32rpx',
					}
				}
			},
		},
		computed: {
			listLen() {
				return this.bannerList.length
			}
		},
		data() {
			return {
				curIndex: 0, //滑动的索引
				descIndex: 0,
				isDescAnimating: false,
				isShow: false
			}
		},
		onLoad() {},
		watch: {
			type: {
				handler(n, o) {
					this.curIndex = n
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			// 显示tip
			showTip() {
				if (this.curIndex == 2) {
					this.isShow = !this.isShow
				} else {
					this.isShow = false
				}
			},
			swiperChange(e) {
				try {
					let index = e.detail.current
					this.current = index
					this.curIndex = e.mp.detail.current
					this.$emit('toParent', index)
					const that = this
					this.curIndex = e.mp.detail.current
					this.isDescAnimating = true
					let timer = setTimeout(function() {
						that.descIndex = e.mp.detail.current
						clearTimeout(timer)
					}, 150)
				} catch (e) {
					console.log(e)
				}
			},
			animationfinish(e) {
				this.isDescAnimating = false
			},
			getBannerDetail(index) {},
		},
		mounted() {}
	}
</script>
<style lang="scss" scoped>
	.banner-container {
		width: 100vw;
		height: 350rpx;

		.image-container {
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			display: flex;

			.slide-image {
				width: 640rpx;
				height: 350rpx;
				z-index: 200;
				background-size: 100% !important;
				background-repeat: no-repeat,
			}
		}

		.item-left {
			justify-content: flex-end;
			padding: 56rpx 32rpx 0 0;
		}

		.item-right {
			justify-content: flex-start;
			padding: 56rpx 0 0 32rpx;
		}

		.item-center {
			justify-content: center;
			padding: 56rpx 0 0 0;
		}

		@keyframes descAnimation {
			0% {
				opacity: 1;
			}

			25% {
				opacity: .5;
			}

			50% {
				opacity: 0;
			}

			75% {
				opacity: .5;
			}

			100% {
				opacity: 1;
			}
		}

		@-webkit-keyframes descAnimation {
			0% {
				opacity: 1;
			}

			25% {
				opacity: .5;
			}

			50% {
				opacity: 0;
			}

			75% {
				opacity: .5;
			}

			100% {
				opacity: 1;
			}
		}

		.hideAndShowDesc {
			animation: descAnimation .3s ease 1;
			-webkit-animation: descAnimation .3s ease 1;
		}
	}

	.text {
		display: flex;
		justify-content: space-between;

		&-left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 100%;

			&>text {
				font-size: 30rpx;
				margin: 8rpx auto auto 20rpx;
				height: 28rpx;
			}

			.text1 {
				color: #fff !important;
			}

			.text3 {
				color: #10111A !important;
			}

			&>view:nth-child(2) {
				margin: 96rpx 0 30rpx;
				display: flex;
				flex-direction: column;
				height: 126rpx;

				&>view:nth-child(1) {
					display: flex;
					justify-content: space-between;

					&>view:nth-child(1) {
						display: flex;
						flex-direction: column;
						margin: 0 16rpx 0 31rpx;

						&>text:nth-child(1) {
							font-size: 42rpx;
							font-weight: bold;
							color: #2C2C2E;
						}
					}

					&>view:nth-child(2) {
						font-size: 26rpx;
						color: #554E4B;
						display: flex;
						flex-direction: column;
						text-align: end;
						margin-top: 10rpx;
						text-align: center;
						margin-right: 86rpx;

						&>text:nth-child(2) {
							font-size: 20rpx;
							color: #fff !important;
						}
					}
				}

				// 进度条
				&>view:nth-child(2) {
					margin: 21rpx 0 0 29rpx;
					width: 561rpx;
					height: 9rpx;
					border-radius: 30rpx;
					position: relative;
				}

				// 进度条 试用
				.progress1 {
					border: 8rpx solid linear-gradient(0deg, #000000, #FFFFFF) 10 10;
					background: linear-gradient(63deg, #E8EAF0, #E9EAED);
					box-shadow: -1rpx -1rpx 0rpx 0rpx #FFFFFF, 1rpx 1rpx 0rpx 0rpx rgba(90, 88, 88, 0.6);
					display: flex;

					.progressActive {
						height: 9rpx;
						border: 8px solid linear-gradient(0deg, #000000, #FFFFFF) 10 10;
						background: linear-gradient(63deg, #9DA0AC, #A1A3AF);
						box-shadow: 0rpx 1rpx 2rpx 0rpx rgba(16, 17, 26, 0.59);
						align-self: center;
						overflow: hidden;
					}

					.progressActiveLine {
						width: 11rpx;
						height: 11rpx;
						background: #FFFFFF;
						border-radius: 50%;
						align-self: center;
						box-shadow: 0rpx 0rpx 10rpx 4rpx #fff;
					}
				}

				// 正式
				.progress2 {
					border: 8px solid linear-gradient(0deg, #000000, #FFFFFF) 10 10;
					background: linear-gradient(63deg, #FFBF89, #FFBD83);
					box-shadow: -1rpx -1rpx 0rpx 0rpx #FFFFFF, 1rpx 1rpx 0rpx 0rpx rgba(90, 88, 88, 0.6);
					display: flex;

					.progressActive {
						height: 8rpx;
						border: 8rpx solid linear-gradient(0deg, #000000, #FFFFFF) 10 10;
						background: linear-gradient(63deg, #FFF8E0, #FFF3CE);
						box-shadow: 0px 1px 2px 0px rgba(16, 17, 26, 0.59);
						align-self: center;
					}

					.progressActiveLine {
						width: 11rpx;
						height: 11rpx;
						background: #FFFFFF;
						border-radius: 50%;
						align-self: center;
						box-shadow: 0rpx 0rpx 10rpx 4rpx #fff;
					}
				}

				// 金牌
				.progress3 {
					border: 8rpx solid linear-gradient(0deg, #000000, #FFFFFF) 10 10;
					background: linear-gradient(63deg, #008349, #008E59);
					box-shadow: -1rpx -1rpx 0rpx 0rpx #FFFFFF, 1rpx 1rpx 0rpx 0rpx rgba(90, 88, 88, 0.6);
					display: flex;

					.progressActive {
						height: 8rpx;
						border: 8rpx solid linear-gradient(0deg, #000000, #FFFFFF) 10 10;
						background: linear-gradient(63deg, #FBF3EA, #FFFFF4);
						box-shadow: 0px 1px 2px 0px rgba(16, 17, 26, 0.59);
						align-self: center;
					}

					.progressActiveLine {
						width: 11rpx;
						height: 11rpx;
						background: #FFFFFF;
						border-radius: 50%;
						align-self: center;
						box-shadow: 0rpx 0rpx 10rpx 4rpx #fff;
					}
				}
			}

			&>view:nth-child(3) {
				margin: 0rpx 0 0 29rpx;

				&>text:nth-child(1) {
					color: #2C2C2E;
					font-size: 37.9rpx;
					font-weight: bold;
				}

				&>text:nth-child(2) {
					color: #2C2C2E;
					font-size: 24rpx;
				}
			}
		}
	}

	.iconWhy {
		width: 26rpx;
		height: 26rpx;
		vertical-align: middle;
		margin-left: 12rpx;
		margin-top: -5rpx;
		position: relative;
	}

	.iconWhy2 {
		width: 180rpx;
		height: 77rpx;
		display: block;
		position: fixed;
		background: url('https://images.linglinggong.net/static/icon3/grow/bg.png') center center/100% 100% no-repeat;
		top: 210rpx;
		left: 418rpx;
		z-index: 99999;
		font-size: 18rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		line-height: 1;
		font-size: 20rpx;
		animation: des .3s ease 1;
		-webkit-animation: des .3s ease 1;

		&>text:nth-child(1) {
			margin-top: 4rpx;
		}

		&>text:nth-child(2) {
			margin-top: 3rpx;
		}
	}

	@-webkit-keyframes des {
		15% {
			opacity: 0.3;
			transform: translateX(-100rpx);
		}

		75% {
			opacity: 1;
			transform: translateX(50rpx);
		}
	}
</style>